<template>
  <q-dialog
    v-model="show"
    :maximized="false"
    transition-show="slide-up"
    transition-hide="slide-down"
    class="new-message-dialog"
    @hide="onHide"
  >
    <q-card class="notification-card">
      <q-card-section class="notification-header">
        <div class="header-content">
          <q-icon name="notifications" size="32px" color="primary" class="notification-icon" />
          <div class="header-text">
            <div class="title">您有新的消息</div>
            <div class="subtitle">{{ totalUnread }} 条未读消息</div>
          </div>
        </div>
        <q-btn
          flat
          round
          dense
          icon="close"
          @click="close"
          class="close-btn"
        />
      </q-card-section>

      <q-card-section class="notification-body">
        <div v-if="unreadChats.length === 0" class="no-messages">
          <q-icon name="check_circle" size="48px" color="positive" />
          <div class="no-messages-text">暂无未读消息</div>
        </div>
        
        <div v-else class="unread-chats-list">
          <div
            v-for="chat in unreadChats.slice(0, 5)"
            :key="chat.chat_id"
            class="chat-item"
            @click="handleChatClick(chat)"
          >
            <q-avatar
              :class="{ 'group-avatar': chat.chat_type === 2 }"
              size="40px"
              class="chat-avatar"
            >
              {{ chat.name?.[0] || 'U' }}
            </q-avatar>
            <div class="chat-info">
              <div class="chat-name-wrapper">
                <span class="chat-name">{{ chat.name }}</span>
                <q-icon
                  v-if="chat.chat_type === 2"
                  name="people"
                  size="14px"
                  class="group-icon"
                />
              </div>
              <div class="chat-unread">
                <q-badge
                  :label="chat.unread_count > 99 ? '99+' : chat.unread_count"
                  color="primary"
                  class="unread-badge"
                />
                <span class="unread-text">条未读</span>
              </div>
            </div>
            <q-icon name="chevron_right" size="20px" class="chevron-icon" />
          </div>
          
          <div v-if="unreadChats.length > 5" class="more-chats">
            还有 {{ unreadChats.length - 5 }} 个会话有未读消息
          </div>
        </div>
      </q-card-section>

      <q-card-actions v-if="unreadChats.length > 0" class="notification-actions">
        <q-btn
          flat
          label="查看全部"
          color="primary"
          @click="handleViewAll"
          class="action-btn"
        />
        <q-btn
          flat
          label="稍后查看"
          @click="close"
          class="action-btn"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useQuasar } from 'quasar';

interface UnreadChat {
  chat_id: string;
  chat_type: number;
  to_id: string;
  name: string;
  unread_count: number;
}

interface Props {
  unreadChats: UnreadChat[];
  totalUnread: number;
}

const props = defineProps<Props>();
const emit = defineEmits<{
  'chat-click': [chat: UnreadChat];
  'view-all': [];
  'close': [];
}>();

const $q = useQuasar();
const show = ref(true);

// 监听外部控制显示/隐藏
defineExpose({
  show: () => { show.value = true; },
  hide: () => { show.value = false; }
});

const close = () => {
  show.value = false;
  emit('close');
};

const onHide = () => {
  emit('close');
};

const handleChatClick = (chat: UnreadChat) => {
  emit('chat-click', chat);
  close();
};

const handleViewAll = () => {
  emit('view-all');
  close();
};
</script>

<style lang="sass" scoped>
.new-message-dialog
  :deep(.q-dialog__inner)
    display: flex
    align-items: flex-end
    justify-content: center
    padding: 20px

.notification-card
  width: 100%
  max-width: 480px
  border-radius: 20px 20px 0 0
  background: rgba(255, 255, 255, 0.98)
  backdrop-filter: blur(20px)
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12)

.notification-header
  padding: 20px 24px 16px
  border-bottom: 1px solid rgba(0, 0, 0, 0.08)
  display: flex
  align-items: center
  justify-content: space-between

.header-content
  display: flex
  align-items: center
  gap: 16px
  flex: 1

.notification-icon
  animation: pulse 2s ease-in-out infinite

@keyframes pulse
  0%, 100%
    transform: scale(1)
  50%
    transform: scale(1.1)

.header-text
  flex: 1

.title
  font-size: 18px
  font-weight: 600
  color: #1f2937
  margin-bottom: 4px

.subtitle
  font-size: 14px
  color: #6b7280

.close-btn
  color: #9ca3af

.notification-body
  padding: 16px 24px
  max-height: 400px
  overflow-y: auto

.no-messages
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  padding: 40px 20px
  gap: 16px

.no-messages-text
  font-size: 16px
  color: #6b7280

.unread-chats-list
  display: flex
  flex-direction: column
  gap: 12px

.chat-item
  display: flex
  align-items: center
  gap: 12px
  padding: 12px
  border-radius: 12px
  background: rgba(124, 58, 237, 0.04)
  cursor: pointer
  transition: all 0.2s ease

  &:hover
    background: rgba(124, 58, 237, 0.08)
    transform: translateX(4px)

.chat-avatar
  flex-shrink: 0
  background: #C9C9C9
  color: white
  font-weight: 500
  border: 1px solid #E5E5E5

  &.group-avatar
    background: #C9C9C9

.chat-info
  flex: 1
  min-width: 0

.chat-name-wrapper
  display: flex
  align-items: center
  gap: 6px
  margin-bottom: 6px

.chat-name
  font-size: 15px
  font-weight: 600
  color: #1f2937
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

.group-icon
  color: #f59e0b
  flex-shrink: 0

.chat-unread
  display: flex
  align-items: center
  gap: 8px

.unread-badge
  font-size: 12px
  font-weight: 600
  min-width: 24px
  height: 24px
  border-radius: 12px

.unread-text
  font-size: 13px
  color: #6b7280

.chevron-icon
  color: #9ca3af
  flex-shrink: 0

.more-chats
  text-align: center
  padding: 12px
  font-size: 14px
  color: #6b7280
  background: rgba(0, 0, 0, 0.02)
  border-radius: 8px
  margin-top: 8px

.notification-actions
  padding: 16px 24px
  border-top: 1px solid rgba(0, 0, 0, 0.08)
  display: flex
  justify-content: flex-end
  gap: 12px

.action-btn
  font-weight: 600
  padding: 8px 20px
</style>

